<template>
  <div class="good-item-nav-bar">
    <nav-bar>
      <div slot="left" @click="prev"><i class="el-icon-arrow-left"></i></div>
      <div slot="center" class="context">
        <span v-for="(item, index) in list" :key="index">{{ item }}</span>
      </div>
    </nav-bar>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/navBar.vue";
export default {
  name: "GoodItemNavBar",
  components: {
    NavBar,
  },
  data() {
    return {
      list: ["商品", "参数", "评论", "推荐"],
    };
  },
  methods:{
    //详情页返回首页按钮
    prev(){
      this.$router.back()
    }
  }
};
</script>

<style scoped>
.good-item-nav-bar {
  position: sticky;  
  height: 44px;
  line-height: 44px;
  background: var(--tint-color);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}
.context {
  display: flex;
  /* background: green; */
}
.context span {
  flex: 1;
}
</style>